<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用vw和rem布局</title>
</head>
<body>

    <div class="main">
        <div class="goods">
            <img src="https://imgservice.suning.cn/uimg1/pcpv/pcpv/whitePic/2022/03/17/18/2de6671928e94d1ba2ea6d03435c5048.png?format=_is_200w_200h_4e.webp" alt="">
        </div>

        <div class="goods">
            <img src="https://imgservice.suning.cn/uimg1/pcpv/pcpv/whitePic/2022/04/22/17/95598002bb584b66827e99feee752577.png?format=_is_200w_200h_4e.webp" alt="">
        </div>
        <div class="goods">
            <img src="https://imgservice.suning.cn/uimg1/sniss/improve/xNQncHiUItcJmz9RphsZ6Q.jpg?format=_is_200w_200h_4e.webp" alt="">
        </div>
    </div>
</body>
<style>
    /**rem 结合 vw布局，元素还是使用rem去计算,但是rem的html中的font-size使用vw来表示**/

    html{
        /**1px=0.2666666vw**/
        font-size:26.66666vw;/**等价于100px 当然是在375px中得**/
    }

    body{
        margin: 0;
        padding: 0;
        margin: 0 auto;
    }
    .main{
        width:3.75rem;
        height:1.33rem;
        background-color: antiquewhite;
    }

    .goods,img{
        height:1.33rem;
        width: 1.13rem;
        background-color: aqua;
        float: left;
    }
</style>
</html>